<template>
  <el-container style="padding: 20px;">
    <el-main>
      <!-- 模型训练参数配置 -->
      <el-card class="box-card" style="margin-bottom: 30px;">
  <div slot="header">
    <span>模型训练参数配置（可选）</span>
  </div>
  <el-form :model="trainConfig" label-width="160px">

    <!-- 第一行：模型类型 + 学习率 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="模型类型">
          <el-select v-model="trainConfig.model_type" placeholder="请选择模型类型">
            <el-option label="qpsk" value="qpsk" />
            <el-option label="OFDM-BPSK" value="ofdm_bpsk" />
            <el-option label="OFDM-QPSK" value="ofdm_qpsk" />
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="学习率">
          <el-input-number v-model="trainConfig.learning_rate" :step="1e-4" :min="1e-5" :max="1e-3" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第二行：max_steps + batch_size -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="最大训练步数">
          <el-input-number v-model.number="trainConfig.max_steps" :min="1000" :step="1000" />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="批量大小">
          <el-input-number v-model.number="trainConfig.batch_size" :min="1" :max="512" />
        </el-form-item>
      </el-col>
    </el-row>

    <!-- 第三行：训练集比例 + 数据增强 -->
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="训练集比例">
          <el-slider v-model="trainConfig.train_fraction" :min="0.7" :max="0.95" :step="0.05" show-input />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="启用数据增强">
          <el-switch v-model="trainConfig.augmentation" />
        </el-form-item>
      </el-col>
    </el-row>
    <el-row :gutter="20">
  <el-col :span="24" style="text-align: center;">
    <el-button
      type="primary"
      @click="startTraining"
      :disabled="isTraining"
      style="margin: 10px;"
    >
      开始训练
    </el-button>
    <el-button
      type="danger"
      @click="stopTraining"
      :disabled="!isTraining"
      style="margin: 10px;"
    >
      终止训练
    </el-button>
  </el-col>
</el-row>
  </el-form>
</el-card>

      <!-- 干扰抑制参数配置 -->
      <el-card class="box-card">
        <div slot="header">
          <span>干扰抑制参数配置</span>
        </div>
        <el-form :model="inferenceConfig" label-width="140px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="干扰抑制方法">
                <el-select v-model="inferenceConfig.method" placeholder="请选择">
                  <el-option label="ModifiedBASIS" value="ModifiedBASIS" />
                  <el-option label="aRGS" value="aRGS" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="干扰信号种类">
                <el-select v-model="inferenceConfig.interference_type" placeholder="请选择">
                  <el-option label="OFDM-QPSK" value="ofdm_qpsk" />
                  <el-option label="OFDM-BPSK" value="ofdm_bpsk" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="信干比 (SIR)">
                <el-slider v-model="inferenceConfig.sir_db" :min="-20" :max="30" show-input />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="迭代轮数">
                <el-input-number v-model="inferenceConfig.iterations" :min="1" :max="200" />
              </el-form-item>
            </el-col>
          </el-row>

          <!-- aRGS 特有参数 -->
          <div v-if="inferenceConfig.method === 'aRGS'">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="学习率下限">
                  <el-input v-model.number="inferenceConfig.lr_low" type="number" step="0.0001" />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="学习率上限">
                  <el-input v-model.number="inferenceConfig.lr_high" type="number" step="0.0001" />
                </el-form-item>
              </el-col>
            </el-row>
          </div>

          <el-button type="primary" @click="submitInference">开始干扰抑制</el-button>
        </el-form>
      </el-card>

      <!-- 结果展示区域 -->
      <el-card class="box-card" style="margin-top: 30px;">
        <div slot="header">
          <span>干扰抑制结果展示</span>
        </div>

        <!-- 性能指标展示 -->
        <el-row :gutter="20" style="margin-bottom: 20px;">
          <el-col :span="6">
            <div class="result-item">
              <div class="label">BER</div>
              <div class="value">{{ results.ber || '未计算' }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="result-item">
              <div class="label">MSE</div>
              <div class="value">{{ results.mse || '未计算' }}</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="result-item">
              <div class="label">SIR (dB)</div>
              <div class="value">{{ inferenceConfig.sir_db }} dB</div>
            </div>
          </el-col>
          <el-col :span="6">
            <div class="result-item">
              <div class="label">方法</div>
              <div class="value">{{ inferenceConfig.method }}</div>
            </div>
          </el-col>
        </el-row>

        <!-- 图像展示区域 -->
        <el-tabs v-model="activeTab" type="card">
          <el-tab-pane label="星座图" name="constellation">
            <div class="chart-container">
              <img :src="results.constellation_img" alt="星座图" v-if="results.constellation_img" />
              <p v-else>暂无数据</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="时域波形" name="time_domain">
            <div class="chart-container">
              <img :src="results.time_domain_img" alt="时域波形" v-if="results.time_domain_img" />
              <p v-else>暂无数据</p>
            </div>
          </el-tab-pane>
          <el-tab-pane label="频谱图" name="spectrum">
            <div class="chart-container">
              <img :src="results.spectrum_img" alt="频谱图" v-if="results.spectrum_img" />
              <p v-else>暂无数据</p>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
    </el-main>
  </el-container>
</template>

<script>
import axios from 'axios';
export default {
  data() {
    return {
      isTraining: false, // 是否正在训练
      trainingLoading: false, // 防止重复提交
      activeTab: "constellation",
      results: {
        ber: null,
        mse: null,
        constellation_img: null,
        time_domain_img: null,
        spectrum_img: null
      },
      // 模型训练参数（可选）
      trainConfig: {
  model_type: "qpsk",
  learning_rate: 5e-4,
  max_steps: 100000,
  batch_size: 32,
  augmentation: true,
  train_fraction: 0.9,
},

      // 干扰抑制参数
      inferenceConfig: {
        method: "ModifiedBASIS",
        interference_type: "ofdm_qpsk",
        sir_db: 0,
        iterations: 50,
        lr_low: 0.0001,
        lr_high: 0.01
      }
    };
  },
  computed: {
    isOfdmModel() {
      return this.trainConfig.model_type !== 'ofdm_bpsk';
    }
  },
  methods: {
    
    async startTraining() {
    if (this.isTraining || this.trainingLoading) return;
    
    this.trainingLoading = true;
    console.log(this.trainConfig)
    try {
      const response = await axios.post('http://127.0.0.1:5000/api/train/start', this.trainConfig);
      console.log(response)
      this.$message.success('训练已启动');
      this.isTraining = true;
    } catch (error) {
      this.$message.error('启动训练失败：' + (error.response?.data?.message || error.message));
    } finally {
      this.trainingLoading = false;
    }
  },

  async stopTraining() {
    if (!this.isTraining || this.trainingLoading) return;

    this.trainingLoading = true;
    try {
      const response = await axios.post('http://127.0.0.1:5000/api/train/stop', {});
      this.$message.success('训练已终止');
      this.isTraining = false;
    } catch (error) {
      this.$message.error('终止训练失败：' + (error.response?.data?.message || error.message));
    } finally {
      this.trainingLoading = false;
    }
  },
  async submitInference() {
  this.inferenceLoading = true;
  try {
    const response = await axios.post('/api/inference', this.inferenceConfig);
    const data = response.data.data;

    // 更新结果显示区域
    this.results.ber = data.ber;
    this.results.mse = data.mse;
    this.results.constellation_img = data.constellation_img;
    this.results.time_domain_img = data.time_domain_img;
    this.results.spectrum_img = data.spectrum_img;

    this.$message.success('干扰抑制完成');
  } catch (error) {
    console.error(error);
    this.$message.error('干扰抑制失败：' + (error.response?.data?.message || error.message));
  } finally {
    this.inferenceLoading = false;
  }
}



  }
};
</script>

<style scoped>
.box-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.el-form-item__content {
  line-height: normal;
}
.result-item {
  padding: 10px;
  background-color: #f5f7fa;
  text-align: center;
  border-radius: 4px;
}
.label {
  font-weight: bold;
  margin-bottom: 5px;
}
.value {
  color: #333;
}
.chart-container {
  text-align: center;
  padding: 10px;
}
</style>